<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/axios.js"></script>
    <script src="./lib/vue2.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: middle;
        }

        /* 所有商品容器 */
        .goods_container {
            width: 900px;
            background: aliceblue;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
        }

        /* 每个商品容器 */
        .per_good {
            height: 250px;
            width: 200px;
            background: bisque;
            font-size: 12px;
            margin: 11px 11px 0 11px;
            border: 1px solid #ccc;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        /*---------------- 图片部分----------------- */
        .goodImg {
            height: 150px;
            margin-bottom: 10px;
        }

        .goodImg img {
            width: 100%;
            height: 100%;
        }

        /* ------------内容部分-------------- */
        .good_content {
            padding: 0 5px;
        }

        /* 分类样式设置 */
        .category {
            padding: 0 5px;
            border-radius: 5px;
            background: salmon;
        }

        /* 原价样式设置 */
        .good_content p:last-of-type {
            position: absolute;
            bottom: 0;
        }

        .price {
            text-decoration: line-through;
            margin-right: 2px;
        }

        /* ---------------分页-------------- */
        .page_container {
            display: flex;
            justify-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .page_container button {
            background: #ddd;
            border: 0;
            margin-right: 10px;
            padding: 0 5px;
            border-radius: 5px;
        }

        .page_container .on {
            background: rgb(65, 103, 154);
        }

        .page_container input {
            width: 50px;
        }

        /* --------------用戶的要求----------------- */
        .user_require {
            width: 900px;
            height: 50px;
            display: flex;
            align-items: center;
            margin: 0 auto;
            background: pink;
        }

        .user_require input {
            width: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="user_require">
            每页显示<input type="text" v-model="parameter.pagesize" @blur="changePageSize()">条
            分类筛选
            <select name="goodsAll" id="" @change="change_category()" v-model="parameter.category">
                <option v-for="(item) in category" :value="item">{{item}}</option>
            </select>
        </div>
        <!-- v-show="item===1 || item===page_Btns.length || item<=isNowPage+2 &&item>=isNowPage-2" -->

        <ul class="page_container">
            <li v-for="(item) in page_Btns"><button @click="btn_click(item)" :key="item"
                v-show="item===1 || item===page_Btns.length || item<=isNowPage+2 &&item>=isNowPage-2"
                    :class="{on:isNowPage===item}">{{item}}</button></li>
            <li><button @click="prePage()">上一页</li>
            <li><button @click="nextPage()">下一页</li>
            <li>当前在第{{isNowPage}}页</li>
            <li><button @click="jump()">跳转到</button><input type="text" v-model="jump_page">页</li>
            <!-- <li>共<input type="text" v-model="list.length">条数据</li> -->
        </ul>


        <div class="goods_container">
            <div class="per_good" v-for="(item) in list">
                <div class="goodImg">
                    <img :src="item.img_big_logo" alt="">
                </div>
                <div class="good_content">
                    <p><span class="category">{{item.category}}</span>
                        {{item.title}}
                    <p><span class="price" v-if="item.price!==item.current_price">&yen;{{item.price}}</span>
                        <span>&yen;{{item.current_price}}</span>
                    </p>
                </div>
            </div>
        </div>



    </div>
    <script>





        let app = new Vue({
            el: "#app",
            data() {
                return {
                    isNowPage: 1,
                    page_Btns: [],
                    // now_page: "",
                    API: "http://localhost:8888",
                    parameter: {
                        current: 1,
                        pagesize: 12,
                        category: ""
                    },
                    list: [],
                    jump_page: null,
                    category: ['', '其他', '内衣配饰', '大家电', '海外购', '童装玩具', '珠宝首饰', '智能设备', '钟表眼镜', '皮具箱包', '邮币乐器', '手机相机', '电脑办公', '厨卫电器', '食品酒水', '居家生活', '厨房电器', '生活电器', '个护健康', '烹饪厨具', '家装建材', '奶粉尿裤', '热门推荐', '男装', '男鞋', '女装', '女鞋', '汽车生活'],
                    isCategory: ""
                }
            },
            mounted() {
                this.sendRequest(this.parameter);
            },
            methods: {
                btn_click(item) {
                    this.isNowPage = item
                    this.parameter.current = this.isNowPage
                    this.sendRequest(this.parameter)

                },
                prePage() {
                    if (this.isNowPage === 1) {
                        this.isNowPage = 1
                    } else {
                        this.isNowPage = this.isNowPage - 1
                    }
                    this.parameter.current = this.isNowPage
                    this.sendRequest(this.parameter)
                },
                nextPage() {
                    if (this.isNowPage === this.page_Btns[this.page_Btns.length - 1]) {
                        this.isNowPage = this.page_Btns[this.page_Btns.length - 1]
                    } else {
                        this.isNowPage = this.isNowPage + 1
                    }
                    this.parameter.current = this.isNowPage
                    this.sendRequest(this.parameter)
                },
                // 对象转字符串的函数，参数是一个对象
                queryString(obj) {
                    let arr = []
                    for (let key in obj) {
                        arr.push(key + '=' + obj[key])
                    }
                    return arr.join('&')
                },
                sendRequest(para) {
                    let page_Btn = []
                    // 请求数据，将参数数据转为字符串拼接在地址部分
                    var xhr = new XMLHttpRequest();
                    xhr.open("get", this.API + "/goods/list?" + this.queryString(para));
                    xhr.send();
                    xhr.onload = () => {
                        let data = JSON.parse(xhr.responseText)
                        this.list = data.list;
                        for (let i = 0; i < data.total; i++) {
                            page_Btn.push(i + 1);
                        }
                        // let arr=[]
                        // console.log(data)
                        // data.list.map(item=>{
                        //     arr.push(item.category)
                        // })
                        // console.log([...new Set(arr)])
                    }
                    this.page_Btns = page_Btn;
                },
                jump() {
                    this.isNowPage = this.jump_page
                    this.parameter.current = this.isNowPage
                    this.sendRequest(this.parameter)
                },
                change_category() {
                    //    console.log(this.parameter.category)
                    // 重新定义当前页为1
                    this.isNowPage = 1
                    this.parameter.current = 1
                    this.sendRequest(this.parameter)
                },
                changePageSize(){
                    this.isNowPage = 1
                    this.parameter.current = 1
                    this.sendRequest(this.parameter)
                }
            },
            watch: {
                parameter: {
                    deep: true,
                    handler(parameter) {
                        return parameter
                    }
                }
            },
            computed:{
                // rander_btns:function(){ 
                //     if(this.page_Btns.length<=7){
                //         let new_arr=this.page_Btns
                //         return new_arr;
                //     }else if(this.isNowPage<=4){
                //         let new_arr1=this.page_Btns.slice(0,6)
                //         new_arr1.push(this.page_Btns.length)
                //         console.log(this.page_Btns,new_arr1)
                //         return new_arr1;
                //     }else if(this.isNowPage>=this.page_Btns.length-4){
                //         let new_arr2=this.page_Btns.slice(this.page_Btns.length-4)
                //         new_arr2.unshift(this.page_Btns[0])
                //         // console.log(new_arr2)
                //         return new_arr2;
                //     }else{
                //         let new_arr3=this.page_Btns.slice(this.isNowPage-3,this.isNowPage+2)
                //         new_arr3.push(this.page_Btns.length)
                //         new_arr3.unshift(this.page_Btns[0])
                //         // console.log(new_arr3)
                //         return new_arr3;
                //     }
                // }
            }
        })
    </script>

</body>

</html>